<template>
  <div class="Singlesong2">
    <div class="main">
      <span @click="getarr(index)" :class="index==show?'p':''" v-for="(item,index) in arr" :key="index" class="span">{{item}}</span>
      <div style="margin-left:30px;margin-top:20px;">
        <Searchsingle v-if="show==0" />
        <Searchsinger v-else-if="show==1" />
        <Searchalbum v-else-if="show==2" />
        <Searchvideo v-else-if="show==3" />
        <Searchsonglist v-else-if="show==4" />
        <Searchusers v-else-if="show==5" />
      </div>

    </div>
  </div>
</template>

<script>
import Searchsingle from '@/components/Searchpanel/Searchsingle.vue'
import Searchsinger from '@/components/Searchpanel/Searchsinger.vue'
import Searchalbum from '@/components/Searchpanel/Searchalbum.vue'
import Searchvideo from '@/components/Searchpanel/Searchvideo.vue'
import Searchsonglist from '@/components/Searchpanel/Searchsonglist.vue'
import Searchusers from '@/components/Searchpanel/Searchusers.vue'
export default {
  name: 'Singlesong',
  data() {
    return {
      arr: ['单曲', '歌手', '专辑', '视频', '歌单', '用户'],
      show: 0
    }
  },
  components: {
    Searchsingle,
    Searchsinger,
    Searchalbum,
    Searchvideo,
    Searchsonglist,

    Searchusers
  },
  methods: {
    getarr(e) {
      this.show = e
    }
  }
}
</script>

<style lang="less" scoped>
.Singlesong2 {
  .main {
    margin-left: -100px;
    margin-top: 40px;
    .span {
      font-size: 15px;
      margin-left: 30px;
      opacity: 0.7;
    }
    .p {
      font-weight: 700;
      font-size: 18px;
      opacity: 0.9;
    }
    .span:hover {
      cursor: pointer;
      opacity: 0.9;
    }
  }
}
</style>